import 'dart:async';
import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_learn_vi/src/bean/bean_user.dart';
import 'package:flutter_learn_vi/src/net/dio_utils.dart';
import 'package:flutter_learn_vi/src/page/common/user_protocol_page.dart';
import 'package:flutter_learn_vi/src/utils/navigator_utils.dart';
import 'package:flutter_learn_vi/src/utils/toast_utils.dart';

/// 创建人： Created by zhaolong
/// 创建时间：Created by  on 2020/11/22.
///
/// 可关注公众号：我的大前端生涯   获取最新技术分享
/// 可关注网易云课堂：https://study.163.com/instructor/1021406098.htm
/// 可关注博客：https://blog.csdn.net/zl18603543572
/// 西瓜视频 https://www.ixigua.com/home/3662978423
/// 知乎 https://www.zhihu.com/people/zhao-long-90-89
///
///
/// 气泡背景的登录页面

void main() => runApp(
      MaterialApp(
        home: BobbleRegisterPage(),
      ),
    );

class BobbleRegisterPage extends StatefulWidget {
  @override
  _BobbleRegisterPageState createState() => _BobbleRegisterPageState();
}

class _BobbleRegisterPageState extends State<BobbleRegisterPage>
    with TickerProviderStateMixin, WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    //添加监听
    WidgetsBinding.instance.addObserver(this);

    // _userNameController.text = "ceshi1";
    // _passwordController.text = "123456";
  }

  @override
  void dispose() {
    //解绑
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  bool _showInputBg = false;

  //应用尺寸改变时回调
  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    /*
     *Frame是一次绘制过程，称其为一帧，
     * Flutter engine受显示器垂直同步信号"VSync"的驱使不断的触发绘制，
     *Flutter可以实现60fps（Frame Per-Second），
     * 就是指一秒钟可以触发60次重绘，FPS值越大，界面就越流畅。
     */
    WidgetsBinding.instance.addPostFrameCallback((_) {
      //注意，不要在此类回调中再触发新的Frame，这可以会导致循环刷新。
      setState(() {
        ///获取底部遮挡区域的高度
        double keyboderFlexHeight = MediaQuery.of(context).viewInsets.bottom;
        print("键盘的高度 keyboderFlexHeight $keyboderFlexHeight");
        if (MediaQuery.of(context).viewInsets.bottom == 0) {
          //关闭键盘 启动logo动画反向执行 0.0 -1.0
          // logo 布局区域显示出来
          setState(() {
            _showInputBg = false;
          });
        } else {
          //显示键盘 启动logo动画正向执行 1.0-0.0
          // logo布局区域缩放隐藏
          setState(() {
            _showInputBg = true;
          });
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      ///填充布局
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Stack(
          children: [
            //第一部分 第一层 渐变背景
            buildBackground(),
            //第二部分 第二层 气泡
            // BubbleWidget(),
            //第三部分 高斯模糊
            buildBlureWidget(),
            //第五部分 输入框与按钮
            buildColumn(context),
            //第六部分 左上角的关闭按钮
            buildCloseButton(context)
          ],
        ),
      ),
    );
  }

  Positioned buildCloseButton(BuildContext context) {
    return Positioned(
      top: 44,
      left: 10,
      child: CloseButton(
        onPressed: () {
          Navigator.of(context).pop();
        },
      ),
    );
  }

  Widget buildHeroLogo(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Hero(
          tag: "loginTag",
          child: Material(
            color: Colors.transparent,
            child: ClipOval(
              child: InkWell(
                onTap: () {
                  Navigator.of(context).pop();
                },
                child: Image.asset(
                  "assets/images/2.0x/app_icon.png",
                  fit: BoxFit.fill,
                  width: 44,
                  height: 44,
                ),
              ),
            ),
          ),
        ),
        SizedBox(
          width: 16,
        ),
        Text(
          '欢迎注册',
          textAlign: TextAlign.center,
          style: TextStyle(
            color: Colors.blue,
            fontSize: 33.0,
            fontWeight: FontWeight.w600,
          ),
        ),
      ],
    );
  }

  //第一部分 第一层 渐变背景
  Widget buildBackground() {
    return Positioned.fill(
      child: Container(
        decoration: BoxDecoration(
          //线性渐变
          gradient: LinearGradient(
            //渐变角度
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            //渐变颜色组
            colors: [
              Colors.lightBlue.withOpacity(0.3),
              Colors.lightBlueAccent.withOpacity(0.3),
              Colors.blue.withOpacity(0.3),
            ],
          ),
        ),
      ),
    );
  }

  //第三部分 高斯模糊
  Widget buildBlureWidget() {
    return Positioned.fill(
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 0.3, sigmaY: 0.3),
        child: Container(
          color: Colors.white.withOpacity(0.1),
        ),
      ),
    );
  }

  //文本输入框控制器
  TextEditingController _userNameController = TextEditingController();
  TextEditingController _passwordController = TextEditingController();
  TextEditingController _password2Controller = TextEditingController();

  //焦点控制器
  FocusNode _userNameFocusNode = new FocusNode();
  FocusNode _passwordFocusNode = new FocusNode();
  FocusNode _password2FocusNode = new FocusNode();
  bool _passwordIvi = true;
  bool _passwordIvi2 = true;
  StreamController<bool> _passwordStreamController = new StreamController();
  StreamController<bool> _passwordStream2Controller = new StreamController();

  //第五部分 输入框与按钮
  Widget buildColumn(BuildContext context) {
    return Positioned.fill(
      child: GestureDetector(
        onTap: () {
          hidenKeyBoard();
        },
        child: Container(
          color:
              _showInputBg ? Colors.white.withOpacity(0.9) : Colors.transparent,
          padding: EdgeInsets.all(44),
          child: buildInputColumn(context),
        ),
      ),
    );
  }

  //是否选中用户协议
  bool _isProtocol = false;

  Widget buildInputColumn(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        //子Widget 底部对齐
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          SizedBox(
            height: 80,
          ),
          //第四部分 顶部的文字 logo 的Hero动画
          buildHeroLogo(context),
          SizedBox(
            height: 80,
          ),
          TextFieldWidget(
            hintText: '手机号',
            focusNode: _userNameFocusNode,
            controller: _userNameController,
            obscureText: false,
            prefixIconData: Icons.mail_outline,
            submit: (String value) {
              checkUserName(value);
              //焦点切换
              _userNameFocusNode.unfocus();
              FocusScope.of(context).requestFocus(_passwordFocusNode);
            },
          ),
          SizedBox(
            height: 10.0,
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              StreamBuilder(
                initialData: true,
                stream: _passwordStreamController.stream,
                builder:
                    (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
                  return TextFieldWidget(
                    hintText: '密码',
                    controller: _passwordController,
                    focusNode: _passwordFocusNode,
                    obscureText: snapshot.data,
                    prefixIconData: Icons.lock_outline,
                    suffixIconData:
                        snapshot.data ? Icons.visibility : Icons.visibility_off,
                    submit: (String value) {
                      checkPassword(value);
                      submitLoginFunction();
                    },
                    onTap: () {
                      _passwordIvi = !_passwordIvi;
                      _passwordStreamController.add(_passwordIvi);
                    },
                  );
                },
              ),
              SizedBox(
                height: 10.0,
              ),
              StreamBuilder(
                initialData: true,
                stream: _passwordStream2Controller.stream,
                builder:
                    (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
                  return TextFieldWidget(
                    hintText: '确认密码',
                    controller: _password2Controller,
                    focusNode: _password2FocusNode,
                    obscureText: snapshot.data,
                    prefixIconData: Icons.lock_outline,
                    suffixIconData:
                    snapshot.data ? Icons.visibility : Icons.visibility_off,
                    submit: (String value) {
                      checkPassword(value);
                      submitLoginFunction();
                    },
                    onTap: () {
                      _passwordIvi2 = !_passwordIvi2;
                      _passwordStream2Controller.add(_passwordIvi2);
                    },
                  );
                },
              ),
              SizedBox(
                height: 10.0,
              ),
              Row(
                children: [
                  Checkbox(
                    value: _isProtocol,
                    onChanged: (bool value) {
                      setState(() {
                        _isProtocol = value;
                      });
                    },
                  ),
                  InkWell(
                    onTap: () {
                      showUserProtocolPage(
                          context: context, isOneButton: true, rightText: "同意");
                    },
                    child: Text(
                      '注册即代表同意用户协议',
                      style: TextStyle(
                        color: _isProtocol
                            ? Theme
                            .of(context)
                            .accentColor
                            : Colors.grey,
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
          SizedBox(
            height: 20.0,
          ),
          Container(
            width: double.infinity,
            height: 60,
            child: ElevatedButton(
              onPressed: () {
                submitLoginFunction();
              },
              child: Text(
                "注册",
                style: TextStyle(fontSize: 18, color: Colors.white),
              ),
            ),
          ),
          Container(
            width: double.infinity,
            margin: EdgeInsets.only(top: 10),
            height: 60,
          ),
        ],
      ),
    );
  }

  ///登录
  void submitLoginFunction() async {
    //隐藏键盘
    hidenKeyBoard();

    if (!_isProtocol) {
      ToastUtils.showToast("请选择同意用户协议");
      return;
    }

    //获取用户输入的内容
    String userName = _userNameController.text.trim();
    String password = _passwordController.text.trim();
    String password2 = _password2Controller.text.trim();
    //校验
    checkUserName(userName);
    checkPassword(password);
    checkPassword(password2);

    if (password != password2) {
      ToastUtils.showToast("两次输入的密码不一致");
      return;
    }

    //参数封装
    Map<String, String> map = new Map();
    map["mobile"] = userName;
    map["password"] = password;
    //post请求发送
    ResponseInfo responseInfo = await DioUtils.instance.postRequest(
      url: HttpHelper.UWER_Register_URL,
      jsonMap: map,
    );
    //注册成功
    if (responseInfo.success) {
      ToastUtils.showToast("注册成功");
      await Future.delayed(Duration(milliseconds: 1200), () {});
      NavigatorUtils.pop(context, parameters: map);
    } else {
      //注册失败
      ToastUtils.showToast(responseInfo.message);
    }
  }

  void checkPassword(String value) {
    if (value.trim().length == 0) {
      ToastUtils.showToast("请输入密码");
      return;
    }
  }

  void checkUserName(String value) {
    if (value
        .trim()
        .length != 11) {
      ToastUtils.showToast("请输入11位手机号");
      return;
    }
  }

  void hidenKeyBoard() {
    //隐藏键盘
    SystemChannels.textInput.invokeMethod('TextInput.hide');
    _passwordFocusNode.unfocus();
    _userNameFocusNode.unfocus();
  }

  Future<UserBean> selectUserBeanFunction(List<UserBean> userList) async {
    return showDialog(
        context: context,
        barrierDismissible: true,
        builder: (BuildContext context) {
          return AlertDialog(
            content: Container(
              height: 200,
              width: MediaQuery.of(context).size.width,
              child: ListView.builder(
                itemBuilder: (BuildContext context, int index) {
                  UserBean userBean = userList[index];
                  return ListTile(
                    title: Text(userBean.mineName),
                    onTap: () {
                      Navigator.of(context).pop(userBean);
                    },
                  );
                },
                itemCount: userList.length,
              ),
            ),
          );
        });
  }
}

///自定义文本输入框
class TextFieldWidget extends StatelessWidget {
  //占位提示文本
  final String hintText;

  //输入框前置图标
  final IconData prefixIconData;

  //输入框后置图标
  final IconData suffixIconData;

  //是否隐藏文本
  final bool obscureText;

  //输入实时回调
  final Function onChanged;
  final TextEditingController controller;
  final FocusNode focusNode;
  final Function(String value) submit;
  final Function() onTap;

  TextFieldWidget({
    Key key,
    this.hintText,
    this.submit,
    this.focusNode,
    this.prefixIconData,
    this.suffixIconData,
    this.obscureText,
    this.onChanged,
    this.controller,
    this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    //构建输入框
    return TextField(
      focusNode: focusNode,
      controller: controller,
      //实时输入回调
      onChanged: onChanged,
      onSubmitted: submit,
      //是否隐藏文本
      obscureText: obscureText,
      //隐藏文本小圆点的颜色
      cursorColor: Theme.of(context).accentColor,
      //文本样式
      style: TextStyle(
        color: Theme.of(context).accentColor,
        fontSize: 14.0,
      ),
      //输入框的边框
      decoration: InputDecoration(
        //提示文本
        labelText: hintText,
        //提示文本的样式
        labelStyle: TextStyle(color: Theme.of(context).accentColor),
        //可编辑时的提示文本的颜色
        focusColor: Theme.of(context).accentColor,
        //填充
        filled: true,
        //可编辑时 无边框样式
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide.none,
        ),

        //获取输入焦点时的边框样式
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(10),
          borderSide: BorderSide(color: Theme.of(context).accentColor),
        ),

        //文本前置的图标
        prefixIcon: Icon(
          prefixIconData,
          size: 18,
          color: Theme.of(context).accentColor,
        ),
        //文本后置的图标
        suffixIcon: GestureDetector(
          onTap: onTap,
          child: Icon(
            suffixIconData,
            size: 18,
            color: Theme.of(context).accentColor,
          ),
        ),
      ),
    );
  }
}

///自定义按钮
class ButtonWidget extends StatelessWidget {
  //按钮上的文字
  final String buttonLabel;

  //是否填充背景
  final bool hasBorder;

  //点击事件回调
  final GestureTapCallback onTap;

  ButtonWidget({
    Key key,
    @required this.buttonLabel,
    this.hasBorder = false,
    this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: Ink(
        //边框
        decoration: BoxDecoration(
          //定义填充颜色
          color: hasBorder ? Colors.white : Theme.of(context).accentColor,
          //点击事件高亮的边框圆角
          borderRadius: BorderRadius.circular(10),
          //边框设置
          border: hasBorder
              ? Border.all(
                  color: Theme.of(context).accentColor,
                  width: 1.0,
                )
              : Border.fromBorderSide(BorderSide.none),
        ),
        //事件监听回调
        child: buildInkWell(context),
      ),
    );
  }

  InkWell buildInkWell(BuildContext context) {
    return InkWell(
      //事件回调
      onTap: onTap,
      //点击的水波纹与高亮颜色 与Ink设置的背景圆角一致
      borderRadius: BorderRadius.circular(10),
      //按钮样式
      child: Container(
        height: 60.0,
        child: Center(
          child: Text(
            //文本内容
            buttonLabel,
            //文本样式
            style: TextStyle(
              //文本颜色
              color: hasBorder ? Theme.of(context).accentColor : Colors.white,
              //加粗
              fontWeight: FontWeight.w600,
              //文字大小
              fontSize: 16.0,
            ),
          ),
        ),
      ),
    );
  }
}
